<template>
  <div class="U000027-template1" :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <!--表单静态-->
    <div class="form-box">
      <div class="title" v-if="datas.form && datas.form.title">已选表单: {{datas.form.title}}</div>
      <i class="iconfont icon-ht_show_formicon"></i>
      <div>自定义表单样式可在移动端查看</div>
    </div>


  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";

	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
			} = this.datas;

			return `
        .component-${this.id} .form-box {
            background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image || emptyImage : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
    `;
		}
	};

	export default {
		props: ['id', 'datas', 'styles'],
		data() {
			return{
				emptyImage,
			}
		},
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},
		watch: {},

		methods: {},

	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .form-box {
    width: 100%;
    /*height: 200px;*/
    padding: 20px;
    text-align: center;
    .title {
      font-size: 16px;
    }
    .icon-ht_show_formicon {
      font-size: 100px;
      color: #999999;
    }
  }
</style>
